<template>
  <div class="t-card">
    <el-row :span="24"
            :gutter="gutter"
    >
      <el-col v-if="option.addBtn&&option.addBtn==true"
              :span="span"
      >
        <div class="item" :class="{'add':true}"
             @click="rowAdd()"
        >
          <i class="el-icon-plus" />
          <span>添加</span>
        </div>
      </el-col>
      <el-col v-for="(item,index) in data"
              :key="index"
              :span="span"
      >
        <div class="item"
             @click="rowClick(item,index)"
        >
          <div class="body">
            <div class="avatar">
              <img :src="item[imgKey]"
                   alt=""
              >
            </div>
            <div class="detail">
              <div class="title">
                {{ item[titleKey] }}
              </div>
              <div class="info">
                {{ item[infoKey] }}
              </div>
            </div>
          </div>
          <div class="menu">
            <slot name="menu"
                  :index="index"
                  :row="item"
            />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const propsDefault = {
  img: "img",
  title: "title",
  info: "info"
}
export default {
  name: "TCard",
  props: {
    props: {
      type: Object,
      default: () => {
        return propsDefault
      }
    },
    option: {
      type: Object,
      default: () => {
        return {}
      }
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      propsDefault: propsDefault
    }
  },
  computed: {
    imgKey: function () {
      return this.option.props.img || this.propsDefault.img
    },
    titleKey: function () {
      return this.option.props.title || this.propsDefault.title
    },
    infoKey: function () {
      return this.option.props.info || this.propsDefault.info
    },
    span() {
      return this.option.span || 8
    },
    gutter() {
      return this.option.gutter || 20
    }
  },
  methods: {
    rowAdd() {
      this.$emit("row-add")
    },
    rowClick(row, index) {
      this.$emit("row-click", row, index)
    }
  }
}
</script>
<style lang="scss" scoped>
.t-card {
  .item {
    margin-bottom: 16px;
    border: 1px solid #e8e8e8;
    background-color: #fff;
    box-sizing: border-box;
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: "tnum";
    cursor: pointer;
    height: 200px;

    &:hover {
      border-color: rgba(0, 0, 0, .09);
      box-shadow: 0 2px 8px rgba(0, 0, 0, .09);
    }

    .add {
      border: 1px dashed #000;
      width: 100%;
      color: rgba(0, 0, 0, .45);
      background-color: #fff;
      border-color: #d9d9d9;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;

      i {
        margin-right: 10px;
      }

      &:hover {
        color: #40a9ff;
        background-color: #fff;
        border-color: #40a9ff;
      }
    }
  }

  .body {
    display: flex;
    padding: 24px;
  }

  .detail {
    flex: 1
  }

  .avatar {
    width: 48px;
    height: 48px;
    border-radius: 48px;
    overflow: hidden;
    margin-right: 12px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .title {
    color: rgba(0, 0, 0, .85);
    margin-bottom: 12px;
    font-size: 16px;

    &:hover {
      color: #1890ff;
    }
  }

  .info {
    color: rgba(0, 0, 0, .45);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    height: 64px;
  }

  .menu {
    display: flex;
    justify-content: space-around;
    height: 50px;
    background: #f7f9fa;
    color: rgba(0, 0, 0, .45);
    text-align: center;
    line-height: 50px;

    &:hover {
      color: #1890ff;
    }
  }
}
</style>
